<template>
  <div class="dataModel-container" v-loading="dataModelFormLoading">
    <Breadcrumb></Breadcrumb>
    <PageDetailLayout @formCancel="commandFormCancel" @formSubmit="commandFormSubmit">
      <p class="small-title">基础信息</p>
      <el-form :ref="dataModelFormRef" :model="dataModelForm"
               :rules="dataModelRules"
               size="small" label-width="90px" inline>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="模型名称" prop="name">
              <el-input v-model="dataModelForm.name" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实现版本" prop="version">
              <el-input v-model="dataModelForm.version" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="别名">
              <el-input v-model="dataModelForm.displayName" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="dataModelForm.remarks" class="width-300"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p class="small-title">参数配置</p>
      <JsonEditor title="" ref="schemaJsonRef" :schema="dataModelForm.schema"></JsonEditor>
    </PageDetailLayout>
  </div>
</template>
<script>
  import {messageHandle} from "@/utils";
  import {msgCode} from "@/config/string";
  import {routerMeta} from "@/router/routerMeta";
  import JsonEditor from "@/page/assetManagement/partial/JsonSchemaEditor.vue";

  export default {
    name: "DataModelEditEdit",
    components: {JsonEditor},
    data() {
      return {
        dataModelForm: {
          name: '',
          displayName: '',
          version: '',
          schema: {},
          remarks: '',
        },
        dataModelFormLoading: false,
        dataModelFormRef: 'dataModelFormRef',
        dataModelRules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          version: [
            {required: true, message: '请输入实现版本', trigger: 'blur'},
          ],

        },
        isEdit: false,
      }
    },
    mounted() {
      this.init()
    },
    watch: {
      '$route'(to, from) {
        this.init()
      }
    },
    methods: {
      init() {
        this.initDataModelForm();
        if (this.$route.params.id) {
          this.getDetailData(this.$route.params.id);
        }
        this.isEdit = this.$route.path.includes('/edit');
      },
      initDataModelForm() {
        this.dataModelForm = {
          name: '',
          displayName: '',
          version: '',
          schema: {},
          remarks: '',
        }
      },
      resetDataModelForm() {
        this.initDataModelForm();
        const forms = this.$refs[this.dataModelFormRef];
        forms && forms.resetFields();
      },
      getDetailData(id) {
        this.dataModelFormLoading = true
        API.platformMessage.platformMessageModelDetail({_id: id}).then(result => {
          if (result.data) {
            this.dataModelFormLoading = false
            this.dataModelForm = result.data
          }
        })
      },
      commandFormCancel() {
        this.$router.go(-1)
        this.resetDataModelForm()
      },
      commandFormSubmit() {
        this.$refs[this.dataModelFormRef].validate((valid) => {
          if (valid) {
            this.dataModelFormLoading = true
            if(this.isEdit){
              this.dataModelForm.schema = this.$refs.schemaJsonRef.exportSchema()
              API.platformMessage.platformMessageModelEdit(this.dataModelForm).then(result => {
                this.dataModelFormLoading = false;
                messageHandle({code: msgCode.EDIT_SUCCESS, title: '接口模型'});
                this.$router.push({name: routerMeta.dataModelManagement.name})
                this.resetDataModelForm()
              }).catch(err => {
                console.log('err', err)
                this.dataModelFormLoading = false;
              });
            }else{
              this.dataModelForm.schema = this.$refs.schemaJsonRef.exportSchema()
              API.platformMessage.platformMessageModelAdd(this.dataModelForm).then(result => {
                this.dataModelFormLoading = false;
                messageHandle({code: msgCode.ADD_SUCCESS, title:  '接口模型'});  
                this.$router.push({name: routerMeta.dataModelManagement.name})
                this.resetDataModelForm()
              }).catch(err => {
                console.log('err', err)
                this.dataModelFormLoading = false;
              });
            }
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .dataModel-container {
    .small-title {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-top: 0;
      border-left: #2D69E0 solid 4px;
      height: 18px;
      padding-left: 10px;
    }

    .width-300 {
      width: 300px;
    }
  }
</style>
